<template>
  <el-menu
    class="menu-outsidebar"
    :default-active="currentMenuKey"
    :collapse="collapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="menuClick"
  >
    <div
      v-for="item in data"
      :key="item.menuKey"
    >
      <!-- 一级 -->
      <el-menu-item
        v-if="!item.menuArray"
        :index="item.menuKey"
        :disabled="item.menuDisabled"
      >{{item.menuName}}</el-menu-item>
      <!-- 二级 -->
      <el-submenu
        v-else
        :index="item.menuKey"
      >
        <template slot="title">
          <div :style="currentMenu1==item?'color:#ffd04b':'color:#fff'">{{item.menuName}}</div>
        </template>
        <div
          v-for="subItem in item.menuArray"
          :key="subItem.menuKey"
        >
          <el-menu-item
            v-if="!subItem.menuArray"
            :index="subItem.menuKey"
            :disabled="subItem.menuDisabled"
          >{{subItem.menuName}}</el-menu-item>
          <!-- 三级 -->
          <el-submenu
            v-else
            :index="subItem.menuKey"
          >
            <template slot="title">
              <div :style="currentMenu2==subItem?'color:#ffd04b':'color:#fff'">{{subItem.menuName}}</div>
            </template>
            <el-menu-item
              v-for="tubItem in subItem.menuArray"
              :key="tubItem.menuKey"
              :index="tubItem.menuKey"
              :disabled="tubItem.menuDisabled"
            >
              {{tubItem.menuName}}</el-menu-item>
          </el-submenu>
        </div>
      </el-submenu>
    </div>
  </el-menu>
</template>

<script>
import anyfishUI from "../../index";
export default {
  name:"mm-menu",
  props: {
    menuStyle: {
      type: String,
      default: null
    },

    data: {// 菜单数组，结构：[{menuKey:唯一的字符串, menuName:菜单名称, menuArray:下一级的菜单列表, menuDisabled:菜单是否禁用}]
      type: Array,
      default: null
    },

    name: {// 菜单对应的名称
      type: String,
      default: "home$-menu"
    },

    collapse: {// 是否是折叠模式
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      currentMenuKey: null,
      currentMenu1: null,
      currentMenu2: null,
      currentMenu3: null
    }
  },

  watch: {
    data() {
      this.menuClick(anyfishUI.api.getAccountCache(this.name));
    }
  },

  mounted() {
    this.menuClick(anyfishUI.api.getAccountCache(this.name));
  },

  methods: {
    menuClick(menuKey) {
      if (!this.data || this.data.length < 1) {
        return;
      }
      let tempItem = null;
      let tempItem1 = null;
      let tempItem2 = null;
      let tempItem3 = null;
      for (let i = 0; i < this.data.length; i++) {
        let item = this.data[i];
        if (item.menuKey == menuKey) {
          this.updateMenu(item, item, null, null);
          return;
        }
        if (item.menuArray) {
          for (let j = 0; j < item.menuArray.length; j++) {
            let subItem = item.menuArray[j];
            if (subItem.menuKey == menuKey) {
              this.updateMenu(subItem, item, subItem, null);
              return;
            }
            if (subItem.menuArray) {
              for (let k = 0; k < subItem.menuArray.length; k++) {
                let tubItem = subItem.menuArray[k];
                if (tubItem.menuKey == menuKey) {
                  this.updateMenu(tubItem, item, subItem, tubItem);
                  return;
                }
                if (!tempItem) {
                  tempItem = tubItem;
                  tempItem1 = item;
                  tempItem2 = subItem;
                  tempItem3 = tubItem;
                }
              }
            } else {
              if (!tempItem) {
                tempItem = subItem;
                tempItem1 = item;
                tempItem2 = subItem;
                tempItem3 = null;
              }
            }
          }
        } else {
          if (!tempItem) {
            tempItem = item;
            tempItem1 = item;
            tempItem2 = null;
            tempItem3 = null;
          }
        }
      }
      if (tempItem) {
        this.updateMenu(tempItem, tempItem1, tempItem2, tempItem3);
      }
    },

    updateMenu(menuItem, item, subItem, tubItem) {
      this.currentMenuKey = menuItem.menuKey;
      this.currentMenu1 = item;
      this.currentMenu2 = subItem;
      this.currentMenu3 = tubItem;
      let titleArray = [];
      titleArray.push(item.menuName);
      if (subItem) {
        titleArray.push(subItem.menuName);
      }
      if (tubItem) {
        titleArray.push(tubItem.menuName);
      }
      anyfishUI.api.setAccountCache(this.name, this.currentMenuKey);
      this.$emit("change", menuItem, titleArray);
    }
  }
}
</script>

<style scoped>
.menu-outsidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem;
  overflow-y: scroll;
  -ms-overflow-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.menu-outsidebar::-webkit-scrollbar {
  display: none;
}
</style>